<template>
  <v-card
    class="mx-auto addNew-container"
    width="964"
    height="800"
    dark
    style="border-radius: 8px; overflow: hidden"
  >
    <v-toolbar height="40" dense class="card-title">
      <v-toolbar-title>{{ currentTitle }}</v-toolbar-title>
      <div>
        <v-btn @click="saveFormData" icon class="icon-btn mr-5">
          <v-icon color="#EB9B31" class="save-icon">mdi-content-save</v-icon>
        </v-btn>
        <v-btn icon @click="overlayFunc" class="icon-btn">
          <v-icon class="close-icon">mdi-close</v-icon>
        </v-btn>
      </div>
    </v-toolbar>

    <v-window v-model="syncedStep" class="card-content" light>
      <v-window-item :value="1"><NewProject ref="newProject" /></v-window-item>
      <v-window-item :value="2"><NewJob /></v-window-item>
      <v-window-item :value="3"><NewTask /></v-window-item>
    </v-window>

    <v-card-actions v-if="syncedStep === 1" class="card-action">
      <v-btn
        @click="validateProject"
        color="primary"
        class="next-btn"
        depressed
        fab
      >
        <v-icon>mdi-arrow-right-thick</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import NewProject from "./NewProject/NewProject.vue";
import NewJob from "./NewJob/NewJob.vue";
import NewTask from "./NewTask/NewTask.vue";

@Component({
  components: {
    NewProject,
    NewJob,
    NewTask,
  },
})
export default class AddNew extends Vue {
  @PropSync("step", { type: Number, default: 1 }) syncedStep!: number;
  overlayFunc() {
    this.$store.commit({
      type: "OverlayStore/sleepStatus",
    });
  }
  get currentTitle() {
    switch (this.syncedStep) {
      case 1:
        return "Add New Project";
      case 2:
        return "Add New Job";
      case 3:
        return "Add New Task";
      default:
        return "Add New Project";
    }
  }
  async validateProject() {
    const newProjectRef = this.$refs.newProject as NewProject;
    const result = await newProjectRef.validateFormData();
    if (result) {
      console.log(result);
    }
  }

  saveFormData() {
    this.$bus.$emit("projectSaveForm");
  }
}
</script>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
